<!--会员中心 》发布个人名片-->
<template>
  <div style="width: 100%;height: 600px;margin-left: 60px;;
        padding: 20px 20px;box-sizing: border-box;font-size: 17px;text-align: left">
    <h4>发布个人名片</h4>
    <hr style="border: 1px solid rgba(0,0,0,0.1);margin: 10px 0px;">


  </div>
</template>

<script>
import {quillEditor} from 'vue-quill-editor'

export default {
  name: "MemberReleasePersonInfo",
  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      IndustryList: [],
      workInfo: [],
      selectedwork: [],
      selectedworkObject:[],
      tempSelectWork: [],

      DistrictList: [],
      district: '',
      indetail:"",
      presentDistrict: '',
      props: {
        label: "district",
        value: "id",
        children: "list",
      },

      industryId:[],
      salary: '',//期望薪资
      releSalaryselected: {
        userId: '',//用户id
        selectedwork: [],//工种
        district: '',//期望工作城市
        presentDistrict:"",//当前所在城市
        indetail:"",//详细地址
        phone: '',//电话
        salary: '',//期望薪资
        proment:'',//熟练度
        setmethod:'',//结算方式
        termValue:'',//工期
        content: '',//自我介绍
        industryId:[],
        imageUrl: [],//图片
        experience:[],//项目经验
      },
      proment: '',//熟练度
      setmethod: '',//结算方式
      termValue: "",//工期


      Proficiencys: [
        {proficiency: "小工"},
        {proficiency: "长工"},
        {proficiency: "大工"},
      ],
      settleMethods: [
        {settleMethod: "日结"},
        {settleMethod: "月结"},
        {settleMethod: "面议"},
      ],

      Terms: [
        {term: "长期"},
        {term: "短期"},
        {term: "长短皆可"},
      ],

      phone: "",

      imageUrlTempNull: '',
      imageUrls:[],
      imageUrl:'',
      experience: [],

    //  百度地图
      privote:'贵阳',
    };
  },
  methods: {
    locationSuccess(){
      this.dialogVisible3=false;
      let value=document.querySelector(
          "#app > div > section > main > div > div > div.el-col.el-col-18 > div > div > div.el-dialog__wrapper > div > div.el-dialog__body > div > div > div.BMap_noprint.anchorBR > div > div.BMap_geolocationAddress > div"
      )
      this.indetail=value.textContent;
    },
    textDeteail(){
      this.dialogVisible3=true;
    },
    inputInsert(item,ktem) {
      this.selectedworkObject.push(ktem);
      for (let i = 0; i < this.IndustryList.length; i++) {
        if (this.IndustryList[i].id == item.peId) {
          this.industryId.push(this.IndustryList[i].id);
          break;
        }
      }
    },
    openDialog(){
      this.dialogVisible2=true;
    },
    experienceLength() {
      this.experience.push({textareas: "", startTime: "", endTime: ""});
    },
    experienceLengthM(){
      this.experience.pop();
    },
    closeExperience(){
      this.experience=[];
      this.experienceLength();
    },
    enterExperience(){
      this.dialogVisible2=false;
    },

    showDialog() {
      this.dialogVisible = true;
    },
    closeSelect() {
      this.selectedwork = []
    },
    enterSelect() {
      this.dialogVisible = false;
    },
    //选择行业
    selectIndustry(item) {
      this.workInfo = item.list;
    },
    //选择工种分类
    selectWork(item) {
      this.selectedwork.push(item);
    },
    handleClose(i) {
      this.selectedwork.splice(i, 1);
      this.industryId.splice(i,1);
      this.selectedworkObject.splice(i,1);
    },
    selectedAll() {
      this.workInfo = this.tempSelectWork;
    },

    handleRemove(file, fileList) {//当点击删除图片时调用的方法
      this.imageUrl = this.imageUrlTempNull;//删除图片后让user的图片路径恢复之前的路径
      // 向服务器发请求删除服务器的图片 file.response=JsonResult
      // file.response.data 删除文件对应的图片路径
      this.axios.post(this.BASE_URL + '/v1/remove?url=' + file.response.data)
          .then((response) => {
            if (response.data.code == 1) {
              this.$message.success("删除完成！");
            }
          })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
      this.imageUrls.push(res.data);
    },
    beforeAvatarUpload(file) {
      this.imageUrl = file.url;
      this.imageUrls.push(file.url);
      this.dialogVisible1 = true;
    },

    //发布
    release() {
      if (this.selectedwork.length==0){
        this.$message.error("工种不能为空！")
        return;
      } else if (this.district==''){
        this.$message.error("期望工作地不能为空！")
        return;
      }else if (this.presentDistrict==''){
        this.$message.error("所在城市不能为空！")
        return;
      }else if (this.phone==''){
        this.$message.error("联系电话不能为空！")
        return;
      }

      if (this.experience.length==0){
        this.experience=[];
      }



      /*releSalaryselected: {
        userId: '',//用户id
            selectedwork: [],//工种
            district: '',//期望工作城市
            presentDistrict:"",//当前所在城市
            indetail:"",//详细地址
            phone: '',//电话
            salary: '',//期望薪资
            proment:'',//熟练度
            setmethod:'',//结算方式
            termValue:'',//工期
            content: '',//自我介绍
            imageUrl: [],//图片
            experience:[],//项目经验
      }*/
      this.releSalaryselected.userId = 1;
      this.releSalaryselected.selectedwork = this.selectedworkObject;
      this.releSalaryselected.district = this.district;
      this.releSalaryselected.presentDistrict = this.presentDistrict;
      this.releSalaryselected.indetail = this.indetail;
      this.releSalaryselected.phone = this.phone;
      this.releSalaryselected.salary = this.salary;
      this.releSalaryselected.proment = this.proment;
      this.releSalaryselected.setmethod = this.setmethod;
      this.releSalaryselected.industryId=this.industryId;
      this.releSalaryselected.termValue = this.termValue;
      this.releSalaryselected.content = this.wangEditor.txt.html();
      this.releSalaryselected.imageUrl=this.imageUrls;
      let isExperience=false;
      for (let i=0;i<this.experience.length;i++){
        if (this.experience[i].startTime!='' || this.experience[i].endTime!='' || this.experience[i].textareas!=''){
          isExperience=true;
        }
      }
      if (isExperience){
        this.releSalaryselected.experience=this.experience;
      }else {
        this.releSalaryselected.experience=null;
      }

      let jwt=JSON.parse(localStorage.getItem('user')).token;
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .post("http://localhost:29000/v1/releasePersonInfo/addNew", this.releSalaryselected)
          .then((response) => {
            if (response.data.code == 20000) {
              this.$message.success("发布成功！");
              this.$router.push('/workers');
            } else {
              this.$message.error(response.data.message);
            }
          })
    }

  },
  mounted() {
    this.axios.get('http://localhost:36000/v1/lookwork/industry')
        .then((response) => {
          if (response.data.code == 20000) {
            this.IndustryList = response.data.data;
            for (let i = 0; i < this.IndustryList.length; i++) {
              for (let j = 0; j < this.IndustryList[i].list.length; j++) {
                this.workInfo.push(this.IndustryList[i].list[j]);
              }
            }
            this.tempSelectWork = this.workInfo;
          }
        })

    this.axios.get( 'http://localhost:36000/v1/lookwork/districtAll')
        .then((response) => {
          if (response.data.code == 20000) {
            this.DistrictList = response.data.data;
          }
        })

    //通常在此处做一些初始化操作,比如富文本编辑器初始化, 或者发请求的代码
    //初始化富文本编辑器
    this.wangEditor = new this.wangEditor("#content_div");
    this.wangEditor.create();

  }
}
</script>

<style scoped>
/deep/ [data-v-12752846] .el-dialog__body {
  height: 100%;
}

/deep/ .el-textarea__inner {
  font-size: 20px;
  border-radius: 0px;
}

.experience_a {
  margin-left: 10px;
  text-decoration: none;
  font-weight: bold;
  color: #666666;
}

.experience_a:hover {
  color: #0aa1ed;
}

/deep/ .el-image__error, .el-image__inner, .el-image__placeholder {
  width: 80%;
  height: 80%;
}

/deep/ button:active {
  opacity: .6% !important;
}

/deep/ .w-e-toolbar, .w-e-text-container, .w-e-menu-panel {
  width: 700px;
}

.line_spacing > div {
  margin-bottom: 10px;
}

/deep/ .el-color-picker__icon, .el-input, .el-textarea {
  width: 700px;
}

/deep/ .el-input__inner {
  border-radius: 0px;
  width: 100%;
}

/deep/ .el-divider--horizontal {
  position: relative;
  top: -80px;
}

.clickH3 {
  width: 100%;
  padding: 10px 25px 10px 10px;
}

.clickH3:hover {
  background-color: #E5F4ff;
}

/deep/ .el-dialog__body {
  padding: 20px 0px;
  width: 900px;
  height: 600px;
}

/deep/ .el-menu {
  width: 100px;
}

/deep/ .avatar-uploader .el-upload {
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 80px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/deep/ .avatar[data-v-63a32e41] {
  width: 80px;
  height: 80px;
}

.map {
  width: 100%;
  height: 300px;
}
</style>